import React from 'react'
// import { Switch, Route, Redirect } from 'react-router-dom'
import { Route, Redirect } from 'react-router-dom'

import { Home } from './home'
import List from './list/List'
import Detail from './detail/Detail'

// function App() {
//   return (
//     <div className="App">
//         {/* <Route path="/home" children={(props)=><Home {...props} meta={1}></Home>}></Route>
//         <Route path="/list" children={(props)=><List {...props} meta={2}></List>}></Route> */}
//         <Route path="/home" children={(props)=><Home {...props}></Home>}></Route>
//         <Route path="/list" children={(props)=><List {...props}></List>}></Route>
//         <Route path="/detail" children={(props)=><Detail {...props}></Detail>}></Route>
//         <Redirect from="/" to="/home"></Redirect>
//         {/* <Switch>
//           <Route path="/home" component={Home}></Route>
//           <Route path="/list" component={List}></Route>
//           <Route path="/detail" component={Detail}></Route>
//           <Redirect from="/" to="/home"></Redirect>
//         </Switch> */}
//       {/* <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header> */}
//     </div>
//   );
// }

const App = (props) => {
  return (
    <>
      <Route path="/home" children={(props)=><Home {...props}></Home>}></Route>
      <Route path="/list" children={(props)=><List {...props}></List>}></Route>
      <Route path="/detail" children={(props)=><Detail {...props}></Detail>}></Route>
      <Redirect from="/" to="/home"></Redirect>
    </>
  )
}

export default App;
